<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>

</head>
<body>
{% load static %}
<script src='{% static 'js/test.js' %}'></script>
<link href='{% static 'css/test.css' %}' rel="stylesheet">
{#test是自定义#}
{#<link href="{% static 'css/vendor/aos.css' %}" rel="stylesheet">#}
<link href="{% static 'css/vendor/bootstrap-toc.css' %}" rel="stylesheet">
<link href="{% static 'css/vendor/prism.css' %}" rel="stylesheet">
<link href="{% static 'css/main.css' %}" rel="stylesheet">

<script src='{% static 'js/vendor/aos.js' %}'></script>
<script src='{% static 'js/functions.js' %}'></script>
<script src='{% static 'js/vendor/bootstrap.min.js' %}'></script>
<script src='{% static 'js/vendor/bootstrap-toc.js' %}'></script>
<script src='{% static 'js/vendor/jquery.min.js' %}'></script>
<script src='{% static 'js/vendor/popper.min.js' %}'></script>
<script src='{% static 'js/vendor/prism.js' %}'></script>
<script src='{% static 'js/vendor/share.js' %}'></script>
<!------------------------------------------
NAVBAR
------------------------------------------->
<nav class="topnav navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#"><i class="fas fa-anchor mr-2"></i><strong>Anchor UI</strong> Kit</a>
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02"
                aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="navbarColor02" style="">
            <ul class="navbar-nav mr-auto d-flex align-items-center">
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'landing' %}">Intro</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        网络工具 </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href='{% url 'landing' %}'>流量分析</a>
                        <a class="dropdown-item" href="./login.html">端口探测</a>
                        <a class="dropdown-item" href="./blog.html">Blog Index</a>
                        <a class="dropdown-item" href="./page.html">Sample Page</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://v4.bootcss.com/">Docs</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'blog' %}">博客</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto d-flex align-items-center">
                <li class="nav-item">
			<span class="nav-link" href="#">
			<a class="btn btn-info btn-round shadow-sm" href="/admin" data-toggle="modal"
               data-target="#modal_newsletter"><i
                    class="fas fa-cloud-download-alt"></i> 管理员登录
			</a>
			</span>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- End Navbar -->
{% block body %}
    <!-- 默认内容或占位符 -->
{% endblock %}

</body>
<script>
    // 获取 dropdown 切换按钮
    var dropdownToggle = document.querySelector('#navbarDropdown');

    // 获取 dropdown 菜单
    var dropdownMenu = document.querySelector('.dropdown-menu');

    // 为 dropdown 切换按钮添加点击事件监听器
    dropdownToggle.addEventListener('click', function (event) {
        // 阻止默认的 a标签跳转行为
        event.preventDefault();

        // 切换 dropdown 菜单的显示状态
        dropdownMenu.classList.toggle('show');

        // 添加或移除 aria-expanded 属性
        dropdownToggle.setAttribute('aria-expanded', dropdownMenu.classList.contains('show'));
    });

    // 当用户点击文档的其他地方时，关闭 dropdown 菜单
    document.addEventListener('click', function (event) {
        if (!dropdownMenu.contains(event.target) && !dropdownToggle.contains(event.target)) {
            dropdownMenu.classList.remove('show');
            dropdownToggle.setAttribute('aria-expanded', 'false');
        }
    });
</script>
</html>
<!-- Popovers -->
<!-- 假设您的 HTML 结构如上所述 -->


